<template>

  <div class="dashboard-wrapper">
    <!-- 顶部统计卡片 -->
    <div class="stat-row">
      <StatCard label="总访问次数" value="9,120" percent="+20%" />
      <StatCard label="在线访客数" value="182" percent="+10%" />
      <StatCard label="点击量" value="9,520" percent="-12%" :up="false" />
      <StatCard label="新用户" value="156" percent="+30%" />
    </div>

    <!-- 图表 & 代办 -->
    <div class="panel-row">
      <div class="panel">
        <h3>访问量</h3>
        <LineChart />
      </div>
      <div class="panel">
        <h3>代办事项</h3>
        <TodoPanel :list="todoList" />
      </div>
    </div>

    <!-- 底部统计 -->
    <div class="stat-row bottom">
      <StatCard label="总用户量" value="32k" percent="+5%" />
      <StatCard label="总访问量" value="128k" />
      <StatCard label="日访问量" value="1.2k" />
      <StatCard label="周同比" value="20%" percent="+6%" />
    </div>
  </div>
</template>

<script setup>
import StatCard from '@/components/StatCard.vue'
import LineChart from '@/components/LineChart.vue'
import TodoPanel from '@/components/TodoPanel.vue'   // ✅ 引入 TodoPanel

const todoList = [
  { name: '待处理', percent: 75, desc: '3 项', color: '#ff9800' },
  { name: '已完成', percent: 100, desc: '12 项', color: '#52c41a' }
]
</script>

<style scoped>
/* 你的样式完全 OK，无需改动 */
.dashboard-wrapper {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.stat-row.bottom {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.panel-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.panel {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.panel h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}
</style>